<template>
    <!-- 歌单列表 -->
      <ul class="song-sheet-list">
        <li
          class="song-sheet-item"
          v-for="(item, index) in playlist"
          :key="item.id + '' + index"
          @click="toPlayListDetail(item.id)"
        >
          <div class="img-wrap">
            <img
              class="img img-radius-4"
              :src="item.picUrl"
            />
            <div class="play-btn pointer">
              <i class="el-icon-caret-right"></i>
            </div>
            <div class="play-count">
              <i class="el-icon-video-play">{{item.playCount | countFormat}}</i>
            </div>
          </div>
          <div class="text-hidden">
            {{ item.name }}
          </div>
        </li>
      </ul>
    </template>
    
    <script>
    export default {
      props: ['playlist'],
      methods: {
        // 跳转到歌单详情页
        toPlayListDetail(id) {
          this.$router.push({ path: '/playlistdetail/' + id })
        }
      }
    }
    </script>
    
    <style lang="less" scoped>
    .song-sheet-list {
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      .song-sheet-item {
        margin-bottom: 30px;
        width: 19%;
        margin-right: 1%;
      }
    }
    .img-wrap {
      position: relative;
      cursor: pointer;
      .play-btn {
        position: absolute;
        right: 15px;
        bottom: 15px;
        background-color: #fbf7f6;
        color: #ec4141;
        width: 40px;
        height: 40px;
        line-height: 30px;
        text-align: center;
        border-radius: 50%;
        opacity: 0;
        transition: all .8s;
        i {
          font-size: 30px;
          position: absolute;
          right: 4px;
          bottom: 5px;
        }
      }
      &:hover .play-btn {
          opacity: 1;
         
        }
        .play-count{
          position: absolute;
          color: #fff;
          top: 5px;
          right: 5px;
        }
    }
    </style>